<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        #swipers {
            display: flex;
            overflow: hidden;
        }
        
        #swipersContaner {
            width: 300%;
            height: 100%;
            left: -100%;
            position: absolute;
            background-color: orange;
        }
        
        .swiper {
            margin: 0;
            position: absolute;
            display: inline-block;
            /* flex: 1; */
            width: 33.33%;
            height: 100%;
            scroll-snap-align: start;
        }
    </style>
</head>

<body>

    <div id="swipers" style="position: relative;margin-top: 30px;width: 90vw;height: 30vh;margin-left: 50%;transform: translateX(-50%);border: 1px solid gray;">
        <div id="swipersContaner">


            <div class="swiper" style="background-color: red;transform: translate(0%, 0px) translateZ(0px);">


            </div>
            <div class="swiper" style="background-color: wheat;transform: translate(100%, 0px) translateZ(0px);">
            </div>
            <div class="swiper" style="background-color: orange;transform: translate(200%, 0px) translateZ(0px);">
            </div>
        </div>

        <!-- </div>
        <div class="swiper" style="background-color: fuchsia;transform: translate(200%, 0px) translateZ(0px);">


        </div>
        <div class="swiper" style="background-color: orange;transform: translate(300%, 0px) translateZ(0px);">


        </div>
        <div class="swiper" style="background-color: aqua;transform: translate(400%, 0px) translateZ(0px);">


        </div> -->
    </div>


    <script>
        function TimeRange() {
            this.key = (new Date()).getTime();
            this.value = ""
        }

        console.log((TimeRange()))

        $(document).ready(function(e) {
            var start = false,
                clinetx0 = 0,
                left0 = 0;

            $(document).mousedown(function(e) {
                e.stopPropagation();
                start = false;
                console.log("document ddd");
            });
            $("#swipers").mousedown(function(e) {
                e.stopPropagation();
                console.log(e)
                console.log("---enter --")
                start = true;
                clinetx0 = e.clientX;
                left0 = $("#swipersContaner").css("left");
                const leftpx = $("#swipersContaner").css("left");
                const leftSN = leftpx.replace("px", "");
                left0 = parseFloat(leftSN);
            });
            $(window).mousemove(function(e) {
                console.log("wwww")
                    // console.log(e)
                    // if (e.buttons != 1) {
                    //     return;
                    // }
                    // if (!start) {
                    //     return;
                    // }

                if (e.buttons == 1 && start) {

                    const leftM = e.clientX - clinetx0;
                    const left = left0 + leftM;
                    console.log("wwww  +++  " + leftM);
                    $("#swipersContaner").css({
                        "transform": `translate(${leftM}px)`,
                    });
                }

                // // const leftM = e.clientX;

            });

            $(window).mouseup(function(e) {
                e.stopPropagation();
                console.log(e)
                start = false;
                console.log("---mouseup --")
            });


            // $("#swipers").mouseout(function() {
            //     start = false;
            //     console.log("---out --")
            // });

            // $("#swipersContaner").mouseup(function() {
            //     start = false;
            // });
        });
    </script>
</body>

</html>